/*CSS ALL*/
.checkbox,
.radio {
	margin-bottom: 15px;
	display: inline-block;
	&:hover {
		cursor: pointer;
	}
}
// checkbox indent & radio indent
.indent {
    padding-left: 30px;
    .icon-checkbox,
    .icon-radio {
        margin-left: -30px;
    }
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
	display: none;
	& + i {
		width: 22px;
		height: 22px;
		background: url("../images/green@2x.png") 0 0 no-repeat;
        background-size: 240px 24px;
		display: inline-block;
		position: relative;
		bottom: -4px;
		margin-right: 5px;
	}
}
.checkbox:hover input[type="checkbox"] + .icon-checkbox {
	background-position: -24px 0;
}
.checkbox input[type="checkbox"] {
	&:checked + .icon-checkbox {
		background-position: -48px 0;
	}
	&:disabled + .icon-checkbox {
		background-position: -72px 0;
	}
	&:disabled:checked + .icon-checkbox {
		background-position: -96px 0;
	}
}

/*CHECKBOX-XS*/
.checkbox-xs {
    // checkbox indent
    &.indent {
        padding-left: 25px;
        .icon-checkbox {
            margin-left: -25px;
        }
    }
}
.checkbox-xs input[type="checkbox"],
.radio-xs input[type="radio"] {
    & + i {
        height: 16px;
        width: 16px;
        background-size: 160px 16px;
    }
}
.checkbox-xs:hover input[type="checkbox"] + .icon-checkbox {
    background-position: -16px 0;
}
.checkbox-xs input[type="checkbox"] {
    &:checked + .icon-checkbox {
        background-position: -32px 0;
    }
    &:disabled + .icon-checkbox {
        background-position: -48px 0;
    }
    &:disabled:checked + .icon-checkbox {
        background-position: -64px 0;
    }
}


/*RADIO*/
.radio:hover input[type="radio"] + .icon-radio {
	background-position: -144px 0;
}
.radio input[type="radio"] {
	& + .icon-radio {
		background-position: -120px 0;
	}
	&:checked + .icon-radio {
		background-position: -168px 0;
	}
	&:disabled + .icon-radio {
		background-position: -192px 0;
	}
	&:disabled:checked + .icon-radio {
		background-position: -216px 0;
	}
}
/*RADIO-XS*/
.radio-xs {
    // radio indent
    &.indent {
        padding-left: 25px;
        .icon-radio {
            margin-left: -25px;
        }
    }
}
.radio-xs:hover input[type="radio"] + .icon-radio {
    background-position: -112px 0;
}
.radio-xs input[type="radio"] {
    & + .icon-radio {
        background-position: -80px 0;
    }
    &:checked + .icon-radio {
        background-position: -112px 0;
    }
    &:disabled + .icon-radio {
        background-position: -128px 0;
    }
    &:disabled:checked + .icon-radio {
        background-position: -144px 0;
    }
}



